<template>
  <var-pull-refresh v-model="state.isRefresh" @refresh="refresh">
    <div ref="dataPage" class="date-page">
      <div class="page-background">
        <div class="back"></div>
      </div>
      <div class="page-header">
        <span>打卡日程</span>
      </div>
      <div class="date-pick-container">
        <var-date-picker :show-current="false" v-model="date" />
      </div>
      <div class="list-container">
        <!-- <div class="list-title">
        <span>学习签到报表</span>
        </div>-->
        <div class="list">
          <div class="item-box" v-for="item in state.list" :key="item.id">
            <div class="item">
              <div class="time">
                <span>{{ formatDate(Number(item.startTime)) }}-{{ formatDate(Number(item.endTime)) }}</span>
              </div>
              <div class="title">{{ item.className }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </var-pull-refresh>
</template>
<script>
import { ref, reactive, onMounted, watchEffect } from "vue";
import { getToday } from "@/util";
import { getDateList } from "@/api";
import { useStore } from "vuex";
import { getSystemBarHeight, setPageTopBarHeight } from "@/util/uni-5+app.utils";
import dayjs from "dayjs";
export default {
  name: "DataView",
  setup() {
    const dataPage = ref()
    const store = useStore();
    // const isLoading = ref(false);
    // const isRefresh = ref(false);
    const date = ref(getToday("YYYY-MM-DD"));
    const state = reactive({
      isRefresh: false,
      loading: false,
      list: [

      ]
    });

    // 获取数据
    const getList = value => {
      getDateList({
        url:
          "/asign-api/getAsignList",
        params: {
          createDate: value,
          userId: store.state.userInfo.userId,
        },
        success: list => {
          state.list = [...list];
        },
        fail: () => { },
        complete: () => {
          state.isRefresh = false;
        }
      });
    };

    // 下拉刷新 回到今天
    const refresh = () => {
      date.value = getToday("YYYY-MM-DD"); //日期重置
    };

    watchEffect(() => {

      getList(date.value)
    }
    );

    // 传入时间戳 显示具体日期
    const formatDate = (timeString) => {
      return dayjs(timeString).format("HH:mm")
    }
    onMounted(() => {
      setPageTopBarHeight({
        dom: dataPage.value,
        height: getSystemBarHeight(),
        textColor: "light"
      })
    })
    return {
      dataPage,
      date,
      state,
      refresh,
      formatDate
    };
  }
};
</script>
<style lang="scss" scoped>
.date-page {
  min-height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  // padding-top: 40px;
  .page-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .back {
      height: 200px;
      width: 100%;
      border-radius: 0 0 25px 25px;
      background-color: rgb(97, 99, 234);
    }
  }

  .page-header {
    height: 50px;
    width: 100%;
    text-align: center;

    span {
      color: white;
      font-weight: 600;
    }
  }

  .date-pick-container {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 290px;
    border-radius: 15px;
    margin-bottom: 10px;
  }

  .list-container {
    width: 100%;
    flex: 1;
    // background-color: white;

    border-radius: 15px;

    .list-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }

    .list {
      border-radius: 15px;

      .item-box {
        width: 100%;
        padding: 0 10px;
        background-color: white;

        .item {
          display: flex;
          border-bottom: 1px solid rgb(223, 223, 223);
          padding: 10px 0;
          line-height: 30px;
          font-size: 14px;

          .time {
            width: 100px;
            // font-size: 14px;
            border-right: 2px solid rgb(52, 132, 208);
            margin-right: 10px;
            color: rgb(48, 48, 48);
          }

          .title {
            flex: 1;
            font-weight: 500;
            color: rgb(48, 48, 48);
          }
        }
      }

      .item-box:nth-last-child(1)>.item {
        border-bottom: none;
      }
    }
  }

  .var-date-picker__title {
    display: none !important;
  }
}
</style>